package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.layer
import myJs.tool.Tool
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{Fragment, React}
import slinky.web.html._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import myJs.Implicits._
import myJs.common.CommentViewCp
import myJs.myPkg.reactBootstrap.Modal
import shared.pojo.Sample._

/**
 * Created by yz on 21/1/2022
 */
@react object FreezerInfoModalCp {

  case class Props(show: Boolean = false, showChange: Boolean => Unit, sampleId: String)

  val component = FunctionalComponent[Props] { props =>

    val (sampleInfo, setSampleInfo) = useState(SampleInfo(tests = List.empty))

    val formRef = React.createRef[html.Form]

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

    }

    useEffect(() => {
      if (props.sampleId.nonBlank) {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(0, options)
        Api.sample.getById(props.sampleId).map { curSampleInfo =>
          setSampleInfo(curSampleInfo)
          layer.close(index)
        }
      }
    }, List(props.sampleId)
    )

    Modal(onHide = FTool.handleClose, show = props.show, size = "addModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", s" 冰箱信息 ( ${props.sampleId} ) ")
        )
      ),
      Modal.Body(
        form(id := "form", data - "toggle" := "validator", className := "form-horizontal", ref := formRef,
          div(className := "row-fluid",

            div(className := "form-group",
              label(className := "control-label col-sm-2", "冰箱编号:"),
              div(className := "col-sm-4",
                p(className := "form-control-static", s"${sampleInfo.freezerNumber}")
              ),
              label(className := "control-label col-sm-2", "层数:"),
              div(className := "col-sm-4",
                p(className := "form-control-static", s"${sampleInfo.freezerLayerNumber}")
              )
            ),

            div(className := "form-group",
              label(className := "control-label col-sm-2", "行数:"),
              div(className := "col-sm-4",
                p(className := "form-control-static", s"${sampleInfo.rowNumber}")
              ),
              label(className := "control-label col-sm-2", "列数:"),
              div(className := "col-sm-4",
                p(className := "form-control-static", s"${sampleInfo.colNumber}")
              )
            ),

            CommentViewCp(sampleInfo = sampleInfo),

          )
        )
      ),
      Modal.Footer(bsPrefix = "modal-footer bg-info")(
        button(`type` := "button", className := "btn green", data - "dismiss" := "modal", "取消",
          onClick := FTool.handleClose),
      )

    )

  }


}
